<template>
	<view>
    <u-popup v-model="isShowInfo" mode="left" width="480rpx" z-index="999" :border-radius="24" class="uPopup">
      <view class="u-box-wrapper">
        <view style="padding-top: 120rpx;" class="px-3 py-4">
          <view class="d-flex a-center">
            <image
              class="u-skeleton-circle imagesBox"
              style=" background-color: #eeeeee;"
              :src="userInfo.avatarUrl"
            ></image>
            <view class="pl-2 u-skeleton-rect">
              <view class="font-md font-weight text-maint">{{ userInfo.realName }}</view>
              <view class="mt-1 font text-main ">{{ userInfo.companyName }}</view>
            </view>
          </view>
        </view>
        
        <view class="m-3 p-2 line-h-min rounded-8 user-control-panel-wrapper">
          <view class="py-1 d-flex a-center control-item" @click="justUserInfoFn">
            <image
              class="u-skeleton-circle imagesBox"
              style="width: 42rpx; height: 42rpx;"
              :src="getStaticFilePath('cio-grxx.png')"
            ></image>
            <view class="pl-2 text-main font-sm ">个人信息</view>
          </view>
          <view class="py-1 d-flex a-center" @click="justPassWordFn">
            <image
              class="u-skeleton-circle imagesBox"
              style="width: 42rpx; height: 42rpx;"
              :src="getStaticFilePath('ico-xgmm.png')"
            ></image>
            <view class="pl-2 text-main font-sm ">修改密码</view>
          </view>
        </view>
        
        <view class="loginOut w-100 px-3">
          <button class="warningBnt btn-cancel" style="width: 100%;" @click="loginOutFn">
            退出登录
          </button>
        </view>
      </view>
    </u-popup>
		<u-modal v-model="show" @confirm="exitLoginOutFn" :show-cancel-button="true" :content="content"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowInfo: false,
			userInfo: uni.getStorageSync('userInfo'),

			show: false,
			content: '您确认要退出吗？'
		};
	},
	methods: {
		innUser() {
			this.isShowInfo = true;
		},
		loginOutFn() {
			this.show = true;
		},
		//确认退出
		exitLoginOutFn() {
			uni.clearStorage();
			this.$Router.replaceAll({
				name: 'login'
			});
		},
		//跳转到个人信息
		justUserInfoFn() {
			this.$Router.push({
				path: '/userPages/pages/userInfo/index'
			});
			this.isShowInfo = false;
		},
		justPassWordFn() {
			this.$Router.push({
				path: '/userPages/pages/forgotPassword/index',
				query: {
					title: '修改密码'
				}
			});
			this.isShowInfo = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.u-box-wrapper {
  overflow: hidden;
  background: url($custom-bg-img-url + 'login-bg.jpg') no-repeat center -100rpx;
  background-size: cover;
  height: 100%;
  
  .user-control-panel-wrapper {
    background-color: rgba(0,0,0, 0.05);
    .control-item {
      border-bottom: 1px solid rgba(0,0,0,0.1);
      &:last-of-type {
        border: none
      }
    }
  }
}

.loginOut {
  position: fixed;
  bottom: 80rpx;
}
</style>
